<template>
  <section
    id="rightMenuDom"
    class="right-menu"
    :style="{
      display: props.rightMenuStatus,
      top: props.rightMenuTop,
      left: props.rightMenuLeft,
    }"
  >
    <ul>
      <li>
        <div v-for="item in rightMenuList" :key="item.id">
          <span :class="item.disabled ? 'disabled' : ''" @click="item.handler">
            {{ item.text }}
          </span>
        </div>
      </li>
    </ul>
  </section>
</template>

<script setup lang="ts">
import type { RightMenuProps } from ".";

const props = defineProps<RightMenuProps>();
</script>

<style scoped lang="scss">
// 右键菜单样式
.right-menu {
  @apply fixed left-0 top-0 w-56 h-auto p-2 rounded-md bg-white hidden;
  border: solid 1px #c2c1c2;
  box-shadow: 0 10px 10px #c2c1c2;
  ul {
    li {
      @apply py-1 list-none;
      border-bottom: 1px solid rgb(216, 216, 217);

      &:nth-last-child(1) {
        border-bottom: none;
      }

      div {
        span {
          @apply py-2 px-8 rounded-md text-sm block;
          &:hover {
            @apply cursor-pointer bg-[#f1f1f1];
          }
        }

        .disabled {
          color: #666666;

          &:hover {
            cursor: not-allowed;
            background-color: #f2f2f2;
            color: #666666;
          }
        }
      }
    }
  }
}
</style>
